var filterPanel = Ext.create('Ext.panel.Panel', {
  bodyPadding: 5, // Don't want content to crunch against the borders
  width: 300,
  title: 'Filters',
  items: [{
    xtype: 'datefield',
    fieldLabel: 'Start date'
  }, {
    xtype: 'datefield',
    fieldLabel: 'End date'
  }],
  renderTo: Ext.getBody()
});


// another way to create gride

Ext.require([
  'Ext.grid.*',
  'Ext.data.*',
  'Ext.panel.*',
  'Ext.layout.container.Border'
]);

Ext.onReady(function() {
  Ext.define('Book', {
    extend: 'Ext.data.Model',
    fields: [
      // set up the fields mapping into the xml doc
      // The first needs mapping, the others are very basic
      {
        name: 'name',
        mapping: 'name'
      },
      'email',
      'country',
      'ip_address'
    ]
  });

  // create the Data Store
  var store = Ext.create('Ext.data.Store', {
    model: 'Book',
    data: [{
      "name": 1,
      "email": "gmarshall0@redcross.org",
      "country": "Ghana",
      "ip_address": "199.95.4.172"
    }, {
      "name": 2,
      "email": "sgibson1@amazon.com",
      "country": "China",
      "ip_address": "143.23.138.210"
    }, {
      "name": 3,
      "email": "fstone2@pbs.org",
      "country": "Yemen",
      "ip_address": "62.96.15.253"
    }, {
      "name": 4,
      "email": "gthomas3@about.com",
      "country": "Malta",
      "ip_address": "108.84.221.168"
    }, {
      "name": 5,
      "email": "lnichols4@nifty.com",
      "country": "Andorra",
      "ip_address": "172.90.199.188"
    }, {
      "name": 6,
      "email": "abarnes5@dailymail.co.uk",
      "country": "China",
      "ip_address": "167.71.86.64"
    }, {
      "name": 7,
      "email": "shudson6@pagesperso-orange.fr",
      "country": "Ukraine",
      "ip_address": "178.47.93.177"
    }, {
      "name": 8,
      "email": "slane7@yellowbook.com",
      "country": "Russia",
      "ip_address": "96.128.105.36"
    }, {
      "name": 9,
      "email": "hgardner8@nsw.gov.au",
      "country": "Indonesia",
      "ip_address": "45.196.26.34"
    }, {
      "name": 10,
      "email": "ljohnson9@webmd.com",
      "country": "Norway",
      "ip_address": "121.4.103.54"
    }]
  });

  // create the grid
  var grid = Ext.create('Ext.grid.Panel', {
    bufferedRenderer: false,
    store: store,
    columns: [{
      text: "Author1111",
      width: 120,
      dataIndex: 'name',
      sortable: true
    }, {
      text: "Email",
      flex: 1,
      dataIndex: 'email',
      sortable: true
    }, {
      text: "Country",
      width: 125,
      dataIndex: 'country',
      sortable: true
    }, {
      text: "IP",
      width: 125,
      dataIndex: 'ip_address',
      sortable: true
    }],
    forceFit: true,
    height: 210,
    split: true,
    region: 'north'
  });

  // define a template to use for the detail view
  var bookTplMarkup = [
    'Title: <a href="{DetailPageURL}" target="_blank">{Title}</a><br/>',
    'Author: {Author}<br/>',
    'Manufacturer: {Manufacturer}<br/>',
    'Product Group: {ProductGroup}<br/>'
  ];
  var bookTpl = Ext.create('Ext.Template', bookTplMarkup);

  Ext.create('Ext.Panel', {
    renderTo: 'binding-example',
    frame: true,
    title: 'Book List',
    width: 580,
    height: 400,
    layout: 'border',
    items: [
      grid, {
        id: 'detailPanel',
        region: 'center',
        bodyPadding: 7,
        bodyStyle: "background: #ffffff;",
        html: 'Please select a book to see additional details.'
      }
    ]
  });

  // update panel body on selection change
  grid.getSelectionModel().on('selectionchange', function(sm, selectedRecord) {
    if (selectedRecord.length) {
      var detailPanel = Ext.getCmp('detailPanel');
      detailPanel.update(bookTpl.apply(selectedRecord[0].data));
    }
  });

  store.load();
});